<template>
  <div class="header-right">
    <div
      v-for="(item, index) of tabList"
      :key="index"
      :class="['tab-item', getClassName(item.type)]"
      @click="changeTab(item.type)"
    >
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import { TAB_TYPE, HomeService } from '@/views/home/homeService';

const tabList = [
  {
    name: '综合监管',
    type: TAB_TYPE.ZHJG,
  },
  {
    name: '科学防范',
    type: TAB_TYPE.KXFF,
  },
  {
    name: '数据接入',
    type: TAB_TYPE.SJJR,
  },
];

function changeTab(type: TAB_TYPE) {
  HomeService.setTabType(type);
}

function getClassName(type: TAB_TYPE) {
  return HomeService.tabType.value === type ? 'right-active' : '';
}

defineComponent({ name: 'HeaderRightComp' });
</script>

<style scoped lang="scss">
.header-right {
  @apply relative;

  .tab-item {
    @apply w-[278px] h-[68px] absolute top-0 flex justify-center items-center text-[#afc8e4] text-[22px] cursor-pointer;
    background: url('../assets/header-left-dark.png') no-repeat center;
    transform: rotateY(180deg);
    font-family: DOUYU;

    span {
      transform: rotateY(180deg);
    }

    &:first-child {
      @apply left-[-70px];
    }

    &:nth-child(2) {
      @apply left-[134px];
    }

    &:last-child {
      @apply left-[340px];
    }
  }

  .right-active {
    background: url('../assets/right-active.png') no-repeat center;
    transform: rotateY(0);

    span {
      transform: rotateY(0);
    }
  }
}
</style>
